프론트엔드 취준생의 2023년 회고
2023년과 2024년!
2024-01-13
일단 먼저 한해가 끝났으니깐 나 스스로 고생했다,,,라고 말해주고 싶다.
정말 시간이 빠르게 가는 것 같다. 눈깜짝하면 한 달이 지나있는 느낌이다. (나이를 먹으면 먹을수록,,) 2023년을 어떻게 보냈는지, 그리고 앞으로 어떻게 살 것인지 적어보려고 한다.!
2022년과 비교해서 정말 기술적으로 많이 성장했나?라고 묻는다면 아닌 것 같기도 하다. 그러나 확실한건, 2023년에는 나름 Next를 쓰면서 프로젝트를 해서 일지는 모르겠지만, Next를 공부하는 것이 재밌고 작년보단 Next에 대한 이해가 조금 더 넓어졌다.
일단 크게 올해를 돌아본다면 아래로 정리할 수 있다.
- 데브코스 합격 전
- 데브코스의 삶
- 데브코스 이후의 삶
먼저 데브코스 합격 전에 어떻게 살았는지(6월까지) 회고를 해보려고 한다.
데브코스 합격 전
먼저 GDSC 에서의 경험을 회고 하려고 한다. 프론트엔드 개발자를 더 파고 싶어서 , 리드분께서 엄청난 프론트엔드 실력자이기 떄문에 보고 배우고 싶어서 GDSC에 들어가게 되었다. (이건 작년이긴 하지만,,)
정말 재미있게 개발을 했다. 솔루션 챌린지에서는 나에게 과분할 정도로 좋은 팀원분들을 만났고, 행복했다..
개발을 하면서 아쉬웠던 점은 당시, 비동기 처리에 대한 이해가 굉장히 부족해서, 애를 많이 먹었다는 것이다. 한가지 애를 먹었던 부분은, 구글 지도 상에서 사용자가 누른 위도와 경도와 api로 받아온 정답의 위도와 경도의 거리를 계산하는 부분이었다.
다행히 두 위도와 경도 사이의 거리를 미터 단위로 거리를 계산해주는 api가 있었고, 해당 api를 통해 해결했었다.
또 하나는 useEffect의 의존성 관리를 적절하게 하지 못했다는 점이다. 아래는 실제 내가 작성했던 useEffect부분의 코드이다. useEffect 훅에 대해 무지한 채 사용하다보니, 문제투성이인,,코드를 작성했던 것 같다.
useEffect(() => {
if (ref.current && !map) {
setMap(
new window.google.maps.Map(ref.current, {
center,
zoom: 8,
scaleControl: false,
streetViewControl: false,
zoomControl: false,
mapTypeControl: false,
fullscreenControl: false,
styles: mapstyle,
})
);
}
if (map) {
google.maps.event.addListener(
map,
'dragstart',
(e: google.maps.MapMouseEvent) => {
setIsDragging(true);
}
);
google.maps.event.addListener(
map,
'dragend',
(e: google.maps.MapMouseEvent) => {
setIsDragging(false);
}
);
google.maps.event.addListener(
map,
'click',
(e: google.maps.MapMouseEvent) => {
const pos = e.latLng?.toJSON();
if (pos && true && drag === false) {
setMark({ pos, map });
}
setnewMap({ map });
}
);
}
}, [ref, map, marker]);
위 부분에서 map,marker가 변경될때마다 useEffect가 재실행되는데, 실제로는 map의 초기화가 이루어질 때 한번만 실행되어도 충분하다. 그리고 클린업 함수를 반환하지 않은 채로 마무리 된 것도 굉장히 아쉽다..
마지막으로는 프로젝트 전체 아키텍쳐에 대한 부재다. 해당 프로젝트는 GCP + 클라우드 런을 써서 서버를 띄우고 있었는데 지금 돌아서 생각해보니, 서버 측 아키텍쳐에 대해 난 프론트엔드니깐...몰라도 되겠지? 라는 생각이 너무 강했다.
지금와서 생각해보니, 너무 잘못된 생각이었다. 결국 GCP를 써서 서버를 띄우는 게 흔하진 않은데, 그때 제대로 물어보고 조금이라도 알아갈걸,,하는 후회가 든다. 어찌저찌 개발을 했고, 정말 뜻하지도 않게 Top 100안에 들었다..., 어떻게 보면 '그게 그렇게 대단한거야?'라고 말할 수도 있지만, 개발하면서 가장 보람치고 뿌듯했던 경험 중 하나이다.
진짜 마지막으로 아쉬운건, Top 100팀들에게는 외국 멘토님과의 멘토링 기회가 주어지는데, 이 기회를 제대로 못살린 것 같다는 것이다. (일단 영어로 말을하고 멘토님이 영어로 말한 내용을 이해하는 게 굉장히 어렵더라,,,) 하다못해 외국 기업으로 취업하려면 무엇을 준비해야 하는지와 같은 질문들이나, 프론트엔드 분야는 외국에서 전망이 어떤 편인지..? 이런 이야기도 못한 게 너무 아쉽다.. (정말 몇 안되는 외국인 멘토분과 이야기 할 수 있는 기회일 수도 있었는데)
(졸지에 김효정이 되버린 나..)
그래도 GDSC에서 정말 값진 경험을 했다. 4년의 대학생활 중 1년을 GDSC에서 보냈고, 들어오기 전과 후는 꽤 많이 다르다고 생각한다. 행복하게 개발을 했고, 재미있게 놀고,, 여러 분들을 만날 수 있었다.
새로운 프로젝트, NearBy
GDSC가 끝나고 학습용으로 개발했던 프로젝트이다. 근처에 있는 이쁜 카페 찾아다니는 것이 한창 절정이었던 때에 만들었는데, Recoil을 배우면서 프로젝트에 적용하기 + vite로 리액트 띄우기에 익숙해지기 위해 만들었다. 항상 vercel을 통해 배포를 하다 처음으로 github page + github action을 써서 배포를 한 프로젝트이기도 하다.
이 때 나름 이것저것 프로젝트에 녹이려고 해보았다. 검색 api를 쓸 때 디바운스로 최소한의 요청만 보내게 작성한다던지, 사용자의 위치를 받을 떄는 geolocation api를 쓰면 된다든지, Intersection Observe을 사용해서 적절한 시점에 이미지를 보이기 한더던지,,,을 배웠던 것 같다.
그 중 꽤 힘들었던 부분은 github pace + github action을 써서 환경변수를 저장하는 방법이었다. 깃헙 페이지를 통해 배포를 했고 로컬환경에는 import.meta 객체를 이용해 로컬에선 잘 환경변수에 접근할 수 있었다.
다만 배포 환경에서는 어떻게 관리해야하지?를 찾아보니 github action의 secrets가 있었다. 이 github action secrets는 환경변수를 암호화해서 저장하고, 꺼내 쓸 수 있게 한다. 결과적으로 로컬에서는 .env를 통해, github action을 이용한 github page에서는 .action secrets를 통해 환경변수를 관리할 수 있었다.
처음 시도했던 방법은 echo명령어를 통해 .env파일을 만들고 해당 파일에 접근하는 방식이다.
- name: Set Environment Variables
env:
VITE_API_KEY: ${{ secrets.VITE_API_KEY }}
VITE_AUTH_DOMAIN: ${{ secrets.VITE_AUTH_DOMAIN }}
VITE_MESSAGE_SENDER_ID: ${{ secrets.VITE_MESSAGE_SENDER_ID }}
VITE_PROJECT_ID: ${{ secrets.VITE_PROJECT_ID }}
VITE_STORAGE_BUCKET: ${{ secrets.VITE_STORAGE_BUCKET }}
VITE_APP_ID: ${{ secrets.VITE_APP_ID }}
VITE_MEASUREMENT_ID: ${{ secrets.VITE_MEASUREMENT_ID }}
run: |
echo "VITE_API_KEY=${VITE_API_KEY}" >> .env
echo "VITE_AUTH_DOMAIN=${VITE_AUTH_DOMAIN}" >> .env
echo "VITE_MESSAGE_SENDER_ID=${VITE_MESSAGE_SENDER_ID}" >> .env
echo "VITE_PROJECT_ID=${VITE_PROJECT_ID}" >> .env
echo "VITE_STORAGE_BUCKET=${VITE_STORAGE_BUCKET}" >> .env
echo "VITE_APP_ID=${VITE_APP_ID}" >> .env
echo "VITE_MEASUREMENT_ID=${VITE_MEASUREMENT_ID}" >> .env
다만, 이렇게 워크플로우를 설정해도 배포를 했을 때 환경변수가 똑같이 적용이 안되는 문제가 발행했다. github action에서는 .env파일을 만들 경우 이 파일은 액션 실행 도중에만 존재하기 때문에, 접근을 할 수 없었다.
따라서 .env파일을 만들고 환경변수를 저장하는 대신, secrets의 변수를 사용하게 만들었다.
데브코스
올해 와서 가장 잘한 일 중 하나가 데브코스에 들어온게 아닐까.,,싶다. 배울 수 있는 점이 많은 훌륭한 팀원들과 멘토님들을 만났고, 지속적인 코어타임이 있어서 개발을 그래도 꾸준하게 할 수 있었다. 그냥 흘러가는 대로 학교를 다니면서 살았다면, 주어진 환경에 계속 안주하면서 살았을 것 같다. 그래도 프론트엔드 개발자로 살아가고 싶어서, 데브코스를 알아보고 지원한 것은 정말 후회없을 정도로 잘한 일이다!.!
데브코스를 하면서 개발에 대한 생각이 많이 달라진 것 같다. 이전에는 단순히 개발을 잘하는 사람이 되고 싶었다. 그러나 우리는 다른 사람들과 함께 살아간다. 개발을 할때에도 다른 프론트엔트 팀원분들과 같이 개발을 해야 할 필요도 있고, 회사에 가면 다른 팀, 다른 직군의 분들과 더 많이 이야기 해야한다. 말이 잘 통하는 팀원이자 동료가 되고 싶다. (물론 더 많은 시행착오와 경험이 필요하겠지만..!)
또 하나 좋은 점은 데브코스를 하면서 회고를 쓰는 것이 익숙해졌다는 점이다..!!!
지금까지 다음과 같은 회고를 썼는데, 앞으로 살아가면서 내가 겪고 경험한 것들을 꾸준하게 기록할 생각이다!.!!
(다들 너무 감사했습니다.!)
데브코스가 끝나고
데브코스가 끝나고 사실 한동안 열심히 쉬었던 것 같다. 하루종일 게임만 하는 날도 꽤 많았고, 여행도 다녀왔다. 데브코스가 끝났지만, 기술적으로 더 공부해야 할 필요를 느꼈다. 사실 졸업하고 바로 취업을 하고 싶다. 취준 기간이 길어지면 너무 힘들 거 같고, 늘어지면 늘어질수록 공부가 잘 안될 것 같기 떄문에, 내가 배울 수 있는 환경이라면 어디든지 취업을 하고 싶다. 😭😭
졸업하기 전에 하나쯤은 완성도 높은 프로젝트를 만들고 싶다. (기술적으로 문제점을 해결하면서도 팀원끼리 협업을 원활히 잘 했다는 걸 어필가능할 정도의 프로젝트...!) 또 실제 프론트엔드 일을 하고 있는 개발자분과 같이 팀을 맞춰서 해보고 싶다. (아무래도 현업에서의 노하우를 조금이라도 알 수 있지 않을까..?) 추가로 코테 공부는 비중이 높진 않지만 꾸준히 할 생각이다. 알고리즘이 어렵다고 코딩테스트 공부를 등한시 해버리면 너무 많은 기회를 날려버리는 것 같다. 지금과 같이 취업이 힘든 시기에는 모든 선택지를 다 두고 준비해야 할 것 같다... 다 까먹은 여러 CS공부도 학교로 돌아가서 하지 않을까..싶다.
이력서도 꾸준히 업데이트하고 여러 회사에 넣어볼 생각이다. 당장 쓸 수 있는 신입이고 싶다. (사실 그렇게 해야 채용이 된다는 걸 알고 있기 떄문에,,)
데브코스가 끝나고 여러 스터디를 하기도 하고 현업 개발자분께 내가 만든 블로그에 대한 코드리뷰를 받았다. 내가 짠 블로그 코드지만, 실제 현업 개발자분이 봤을 때 어떤 점이 어색한지에 대한 풀리지 않은 고민이 있어서, 코드리뷰를 신청하게 되었다. 엄청나게 많은 리뷰를 달아주셨고 너무 감사했다.
해당 리뷰를 바탕으로, 꾸준히 이 프로젝트를 개선해보고 싶다. 물론 다른 팀원분과 협업을 한 것도 아니고, 흔하면 흔한 주제일 수 있지만, 정말 밑바닥부터 쌓아올렸기 떄문에 너무 애착이 간다. 지금 axios를 쓰는 부분을 다 fetch로 옮겨도 보고, 여러 컴포넌트를 스토리북에 올리는 작업도 하고 싶고, 테스트도 공부해서 이 프로젝트에 적용해보고 싶다. Sentry를 쓰고 있지만, 어떻게 하면 더 잘 쓸 수 있지..?에 대한 해답도 찾아가볼 생각이다.
데브코스가 끝나고 면접 스터디를 진행 중이다! 아직 3번밖에 안했지만, 정말 실제 면접을 보는 것처럼 떨렸다,, 항상 말을 조리있게 잘 못하는 게 고민이라면 고민인지라, 이 스터디가 많이 도움이 되고 있다. 또 해당 개념에 대해 찾아보고 공부하는 것도 너무 도움이 된다.
최종 멘토님과 1대1 커피챗 때, 대학생 떄 하면 좋을 것들에 대해 좋은 자료를 공유받았었다.! 다시 학교로 돌아가면 무엇을 해야 하지..?에 대한 물음표가 존재했는데, 조금이나마 가닥이 잡힌 것 같다.
내가 데브코스에서 멘토님들에게 받은만큼, GDSC라는 동아리에서 정말 잘하는 선배의 가르침을 받은만큼, 나도 누군가에게 도움이 되고 싶다. 그래서 새롭게 동아리에 들어갔다. 웹 개발이 뭔지 아예 모르는 신입생도 있을 수 있고, 이제 막 프론트엔드 개발을 시작하는 분들도 존재할 수 있다. 이런 분들에게 내가 조금이라도 도움이 될 수 있다면, 그 무엇보다 값진 대학생활이 될 것 같다.
운동을 꾸준히 하는 것도 올해 목표 중 하나이다. 러닝을 매일 2.5키로씩 뛰는 걸 목표로 하고있는데, 처음 뛸 떄 거의 20분가량이 찍혀서,,, 정말 체력이 바닥이 났구나,,하는 걸 다시 한번 느꼈다. 그래도 뛰면 뛸수록 기록이 조금조금씩 줄어드는 게 보여서 신기하다.!
한달 주기로 2.5 -> 3 -> 3.5 이렇게 거리도 늘려볼 생각이다. 행복하고 값진 일년이었다.! 내년에도 행복하길..!